<template>
  <div>
      <div>
          <span>用户名：{{username}}</span><br>
          <!-- v-moder作用：表单的value属性，和vue变量，双向绑定到一起（谁改了都会影响对方） -->
          <input type="text" v-model="username" name="" id=""><br>
          <input type="password" v-model="password">
          <p></p>

          <select name="" id="" v-model="from"><br>
              <option value="北京">北京市</option>
              <option value="南京">南京市</option>
              <option value="天津">天津市</option>
          </select><br>

          <span>爱好</span><br>
          <!-- 如果v-modelvue的变量是数组类型 关联的是value -->
          <!-- 如果v-modelvue的变量是非数组类型 关联的是checked -->
          <input type="checkbox" v-model="hobby" value="吃饭"><span>吃饭</span>
          <input type="checkbox" v-model="hobby" value="逛街"><span>逛街</span>
          <input type="checkbox" v-model="hobby" value="写代码"><span>写代码</span><br>

          <span>性别</span>
          <input type="radio" v-model="gender" value="男" name="sex">男生
          <input type="radio" v-model="gender" value="女" name="sex">女生
          <br>

          <span>自我介绍</span>
          <textarea v-model="intro"></textarea><br><p></p>

          <span>v-model修饰符</span><br>
          <input type="number" v-model.number="age"><span>number修饰符</span>
          <hr>
          <span>去除两边空格</span>
          <input type="text" v-model.trim="motto">
          <hr>
          <span>当失去焦点时才会改变</span>
          <input type="text" v-model.lazy="intro">

          <h1>v-text和v-html</h1>
          <p v-text="str"></p><span>v-text把值当成普通字符串使用</span>
          <p v-html="str"></p><span>v-html把值当作标签来使用</span>

          <h1>v-show和v-if</h1>
          <!-- v-show隐藏 dispaly:none -->
          <!-- v-if隐藏 直接从DOM树上删除 -->
          <h3 v-show="isShow">v-show</h3>
          <h3 v-if="isShow">v-if</h3>
          <h4>v-if</h4>
          <p v-if="age>18">上网吧</p>
          <p v-else>赶紧回家吃饭</p>
          <h4>v-if-else</h4>
          <p>小明的成绩</p>
          <input type="text" name="" id="" v-model="grade">
          <p v-if="grade>=100">优秀</p>
          <p v-else-if="grade>=80">良好</p>
          <p v-else-if="grade>=70">一般</p>
          <p v-else-if="grade>=60">及格</p>
          <p v-else-if="grade<60">你学的真不错啊</p>
      </div>
  </div>
</template>

<script>
export default {
    data(){
        return {
            username:"",
            password:'',
            from:"北京市",
            hobby:["吃饭"],
            gender:"男",
            intro:'',
            age:'',
            motto:'',
            intro:"",
            str:"<span>看看我的区别</span>",
            isShow:true,
            grade:'',
        }
    },

}
</script>

<style>

</style>